<template>
    <div class="order-refund-detail-header">
        <div class="order-refund-detail-status-top">
            <div class="order-refund-detail-status-title">{{statusTitle}}</div>
            <div class="order-refund-detail-succeeded-time" v-if="showSucceeded">{{refund.succeededTime}}</div>
            <div class="order-refund-detail-succeeded-time" v-if="showDisapproved">{{refund.disapprovalReason}}</div>
            <div class="order-refund-detail-succeeded-time" v-if="showFailed">{{refund.failReason}}</div>
        </div>
        <white-space v-if="showSucceeded"/>
        <div class="order-refund-detail-steps-content" v-if="showSucceeded">
            <div class="van-hairline--bottom order-refund-detail-steps-amount">
                <price prefix="退款金额:" :value="refund.totalAmount" color="#000"/>
                <div class="order-refund-detail-steps-amount-tips">
                    <van-icon name="warning-o" style="margin-right: 4px"/>
                    退款将返还您实际的支付金额。
                </div>
            </div>
            <van-steps :active="3">
                <van-step>
                    <div class="order-refund-detail-steps-name">买家申请</div>
                    <div>{{refund.appliedTime}}</div>
                </van-step>
                <van-step>
                    <div class="order-refund-detail-steps-name">卖家同意</div>
                    <div>{{refund.approvedTime}}</div>
                </van-step>
                <van-step>
                    <div class="order-refund-detail-steps-name">退款到账</div>
                    <div>{{refund.succeededTime}}</div>
                </van-step>
            </van-steps>
        </div>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { Icon, Step, Steps } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import Price from "@/components/Price"

  const { OrderRefundStatus } = order

  export default {
    name: "OrderRefundDetailHeader",
    components: {
      Price,
      WhiteSpace,
      [Icon.name]: Icon,
      [Step.name]: Step,
      [Steps.name]: Steps,
    },
    props: {
      refund: order.OrderRefund,
    },
    computed: {
      statusTitle() {
        const { refund } = this
        const { status } = refund
        if (OrderRefundStatus.Applying === status) {
          return "退款申请等待商家处理"
        } else if (OrderRefundStatus.Pending === status) {
          return "商家已审批，正在退款中"
        } else if (OrderRefundStatus.Succeeded === status) {
          return "退款成功"
        } else if (OrderRefundStatus.Disapproved === status) {
          return "退款申请未通过"
        } else if (OrderRefundStatus.Failed === status) {
          return "退款失败"
        } else {
          return "未知"
        }
      },
      showSucceeded() {
        const { refund } = this
        const { status } = refund
        return status === OrderRefundStatus.Succeeded
      },
      showDisapproved() {
        const { refund } = this
        const { status } = refund
        return status === OrderRefundStatus.Disapproved
      },
      showFailed() {
        const { refund } = this
        const { status } = refund
        return status === OrderRefundStatus.Failed
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-refund-detail-header {
        .order-refund-detail-status-top {
            background: #fff;
            padding: 9px;

            .order-refund-detail-status-title {
                font-size: 15px;
                display: flex;
                align-items: center;
                font-weight: 700;
            }

            .order-refund-detail-succeeded-time {
                display: flex;
                margin-top: 4px;
                font-size: 13px;
            }
        }

        .order-refund-detail-steps-content {
            background: #fff;
            padding: 8px;

            .order-refund-detail-steps-amount {
                padding: 0 0 8px 0;
                font-size: 14px;

                .price {
                    font-size: 14px;
                }
            }

            .order-refund-detail-steps-amount-tips {
                display: flex;
                align-items: center;
                color: $gray-6;
                font-size: 12px;
            }
        }

        .order-refund-detail-steps-name {
            font-size: 14px;
        }

        ::v-deep {

            .van-step--horizontal {
                &:first-child {
                    .van-step__circle-container {
                        left: 26%;
                    }

                    .van-step__line {
                        width: 65%;
                        right: 0;
                        left: initial;
                    }
                }

                .van-step__line {
                    width: 68%;
                }

                &:last-child {
                    .van-step__circle-container {
                        right: 41%;
                    }

                    .van-step__line {
                        width: 0;
                        right: 0;
                        left: initial;
                    }
                }
            }

            .van-step__circle-container, .van-step__line {
                top: 0;
            }

            .van-steps__items {
                padding-bottom: 0;
            }

            .van-step__title {
                margin-top: 6px;
                text-align: center;
            }
        }
    }
</style>
